<template>
  <div class="app-nodata-view">
    <div class="app-nodata-img-container">
      <img class="app-nodata-img" :src="getImage()">
    </div>
    <div class="app-nodata-notice">{{ noticeMsg }}</div>
    
  </div>
</template>

<script>
import { getOssUrl } from '@src/util/assets'
const NO_DATA_IMG = getOssUrl('/no_data.png')
import { t } from '@src/locales'

export default {
  name: 'no-data-view',
  props: {
    noticeMsg: {
      type: String,
      default: t('common.base.tip.noData')
    }
  },
  methods: {
    getImage () {
      return NO_DATA_IMG;
    }
  }
}
</script>

<style lang="scss" scoped>
  .app-nodata-view {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    background-color: #ffffff;
    
    .app-nodata-img-container {
      display: flex;
      justify-content: center;
      align-items: center;

      padding: 100px 0 0;
      
      .app-nodata-img {
        width: 160px;
        height: 160px;
      }
    }

    .app-nodata-notice {
      padding-top: 8px;
      text-align: center;
      color: $text-color-regular;
    }
  }
</style>